<template>
  <div class="works-list">
    <unify-header></unify-header>
    <div class="container" ref="container">
      <div class="wrapper">
        <div class="main">
          <h2 class="title">我的作品</h2>
          <div class="operation">
            <label>作品类型</label>
            <ul class="types-filter" ref="typesFilter">
              <li class="drop-down"></li>
              <li class="type" :class="{candidate:!t.selected}" v-for="t in types" @click="typeFilter(t)">
                {{t.text}}
              </li>
            </ul>
            <div class="manager">
              <a href="javascript:void(0);" v-show="!managerIng" @click="managerIng=true" class="manager-btn">管理</a>
              <a href="javascript:void(0);" v-show="managerIng" @click="checkedAll" class="manager-btn">全选</a>
              <a href="javascript:void(0);" v-show="managerIng" @click="showDeleteDialogVisible" class="manager-btn">删除</a>
              <a href="javascript:void(0);" v-show="managerIng" @click="managerIng=false" class="manager-btn">取消</a>
            </div>
          </div>
          <div class="works-list">
            <div class="works-container">
              <div class="woks-data" v-for="work in workData" :key="work.id">
                <div class="img-box">
                  <el-checkbox v-show="managerIng" v-model="work.checked" class="checkbox-work"></el-checkbox>
                  <img :src="work.thumbnailImageUrl" :alt="work.name" :title="work.name">
                </div>
                <!--<label class="title">{{work.name}}</label>-->
                <label class="title">来源：{{work.client}}</label>
                <span class="time">{{work.createdDt}}</span>
                <span v-if="work.sku" class="type">{{work.sku}}</span>
                <span v-if="!work.sku" class="type">{{work.name}}{{work.shape}}{{work.size}}</span>
                <a href="javascript:void(0);" @click="addCar(work)" class="buy-btn">购买定制</a>
              </div>
            </div>
          </div>
          <el-pagination v-show="total>pageSize"
                         small
                         layout="prev, pager, next"
                         :page-size="pageSize"
                         :total="total"
                         @current-change="paging">
          </el-pagination>
        </div>
        <left-menu selected="works"></left-menu>
      </div>
    </div>
    <unify-footer></unify-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import UnifyHeader from 'components/header/header.vue'
  import UnifyFooter from 'components/footer/footer.vue'
  import LeftMenu from 'components/center/menu.vue'
  import {ALERT_CUSTOM} from 'base/js/common.config'
  import * as WorksApi from '@/api/works'
  import Api from '@/api.js'

  const TYPELIST = [{
    text: '所有类型',
    selected: true
  }, {
    id: 'huace',
    text: '画册'
  }, {
    id: 'citiehua',
    text: '磁贴画'
  }, {
    id: 'citiehuaxin',
    text: '磁贴画芯'
  }, {
    id: 'kuanghua',
    text: '框画'
  }, {
    id: 'heji',
    text: '艺术合集'
  }, {
    id: 'haibao',
    text: '海报'
  }, {
    id: 'lvxingji',
    text: '旅行记'
  }, {
    id: 'biyeji',
    text: '毕业季'
  }, {
    id: 'qixishu',
    text: '遇见情缘'
  }, {
    id: 'shiguangji',
    text: '拾光集'
  }, {
    id: 'xiaoshiguang',
    text: '小时光'
  }, {
    id: 'jiashu',
    text: '家书'
  }, {
    id: 'taili',
    text: '台历'
  }, {
    id: 'guali',
    text: '挂历'
  }]
  export default {
    data: function () {
      return {
        userDbId: '',
        checkedAllValue: false,
        managerIng: false,
        types: TYPELIST,
        workData: [],
        category: '',
        pageSize: 9,
        total: 0,
        pageNum: 1
      }
    },
    methods: {
      addCar(work) {
        if (work.client !== 'pc') {
          if (work.client === 'ios') {
            work.client = '手机端传给雅昌'
          }
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: `作品属于${work.client},请到${work.client}购买`
          })
          return
        }
        Api.car.addCar({
          edtDbId: work.dbId,
          thumbnailImageUrl: work.thumbnailImageUrl,
          category: work.category,
          price: work.price,
          num: 1,
          total: work.price,
          sku: work.sku,
          skuCode: work.skuCode,
          skuId: work.skuId,
          tplCode: work.tplCode,
          status: 1,
          userDbId: localStorage.getItem("userDbId"),
          editCnfName: work.tplCode + '_single'
        }).then(res => {
          if (res.data.code === "success") {
            location.href = "/user/cart"
          }
        })
      },
      deleteWorkList: function () {
        let deleteArr = []
        this.workData.forEach(function (work) {
          if (work.checked) {
            deleteArr.push(work)
          }
        })
        return deleteArr
      },
      deleteWork: function () {
        let deleteArr = this.deleteWorkList()
        let ids = []
        deleteArr.forEach((item) => {
          ids.push(item.dbId)
        })
        WorksApi.batchDeleteWorks(this.userDbId, {
          ids: ids.join(',')
        }).then((res) => {
          if (!res) {
            return
          }
          if (res.status === 1) {
            this.getData()
          } else {
            this.$alert(res.message, '删除失败', ALERT_CUSTOM)
          }
        })
      },
      showDeleteDialogVisible: function () {
        if (!this.deleteWorkList().length) {
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: '请选中需要删除的作品'
          })
          return
        }
        this.$confirm('您确定要删除吗?', '提示', ALERT_CUSTOM).then(() => {
          this.deleteWork()
        }).catch(() => {
          this.$message({
            type: 'info',
            iconClass: "atrup_Message",
            message: '已取消删除'
          })
        })
      },
      getData: function () {
        Api.Works.WorkList({
          sortField: 'createdDt',
          pageSize: this.pageSize,
          pageNum: this.pageNum - 1,
          order: 'desc',
          client: '',
          status: 2,
          category: this.category
        }).then((result) => {
          return result.status === 200 ? result.request.response : ''
        }).then((result) => {
          let data = result ? JSON.parse(result) : ''
          if (!data) {
            return
          }
          let works = []
          data.results.forEach((work) => {
            work.checked = false
            works.push(work)
          })
          this.workData = works
          this.total = data.totalRecord
        })
      },
      typeFilter: function (type) {
        type.selected = true
        let newTypesList = [type]
        TYPELIST.forEach(function (t) {
          t.selected = false
          if (t.id !== type.id) {
            newTypesList.push(t)
          }
        })
        this.types = newTypesList
        let dom = this.$refs.typesFilter
        dom.style.height = '38px'
        setTimeout(() => {
          dom.removeAttribute('style')
        }, 200)
        this.category = type.id
        this.pageNum = 1
        this.getData()
      },
      checkedAll: function () {
        this.checkedAllValue = !this.checkedAllValue
        for (let i = 0; i < this.workData.length; i++) {
          this.workData[i]['checked'] = this.checkedAllValue
        }
      },
      paging: function (val) {
        this.pageNum = val
        this.getData()
      }
    },
    components: {
      UnifyHeader,
      UnifyFooter,
      LeftMenu
    },
    mounted: function () {
      this.setMinHeight(this.$refs.container, document.body.clientHeight - 50 - 132)
    },
    created: function () {
      this.userDbId = localStorage['userDbId']
      if (!this.userDbId) {
        this.login()
      }
      this.getData()
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/sass">

  .works-list {
    .wrapper {
      width: 1152px;
      margin: 0 auto;
      overflow: hidden;
    }
    .container {
      padding: 14px 0 92px;
      background: #f1f1f1;
    }
    .main {
      width: 960px;
      min-height: 666px;
      float: right;
      border-radius: 5px;
      border: 1px solid #dedede;
      background: #fff;
      h2.title {
        padding-left: 30px;
        font-size: 16px;
        line-height: 55px;
        border-bottom: 1px solid #DEDEDE;
      }
      .operation {
        position: relative;
        label {
          margin-left: 30px;
          line-height: 76px;
          font-weight: 400;
        }
      }
      .types-filter {
        position: absolute;
        top: 16px;
        display: inline-block;
        height: 38px;
        z-index: 100;
        margin-left: 20px;
        color: #515151;
        line-height: 38px;
        overflow: hidden;
        border: 1px solid #9e9e9e;
        border-radius: 5px;
        background: #fff;
        .drop-down {
          position: absolute;
          top: 13px;
          right: 6px;
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid #515151;
        }
        .type {
          width: 138px;
          padding-left: 1em;
          border-bottom: 1px solid #9e9e9e;
          &:last-child {
            border: 0;
          }
          &.candidate:hover {
            cursor: pointer;
            background: rgba(139, 195, 74, .2);
          }
        }
        &:hover {
          height: auto;
          .drop-down {
            transform: rotate(180deg);
            transition: all 0.5s;
          }
        }
      }
      .manager {
        float: right;
        margin-right: 20px;
        line-height: 76px;
        a {
          margin-left: 20px;
          color: #A00912;
          font-size: 16px;
          font-weight: 400;
          outline: 0;
          &:hover {
            color: #a9372d;
          }
        }
      }
      .works-list {
        width: 892px;
        padding: 0 34px;
        overflow: hidden;
        .works-container {
          width: 948px;
          overflow: hidden;
        }
      }
      .woks-data {
        position: relative;
        float: left;
        width: 260px;
        margin-right: 56px;
        overflow: hidden;
        .img-box {
          position: relative;
          display: table-cell;
          vertical-align: middle;
          width: 258px;
          height: 195px;
          border: 1px solid #dedede;
          border-radius: 5px;
          overflow: hidden;
          background: rgba(229, 229, 229, .5);
          .checkbox-work {
            position: absolute;
            top: 4px;
            right: 8px;
          }
        }
        img {
          display: block;
          max-height: 100%;
          max-width: 100%;
          margin: 0 auto;
          transition: all ease-out 0.5s;
          &:hover {
            cursor: pointer;
            transform: scale(1.2);
          }
        }
        .title {
          display: block;
          margin-top: 8px;
          color: #303030;
          font-size: 14px;
          font-weight: 400;
        }
        .time, .type {
          display: block;
          color: #cbcbcb;
          font-size: 12px;
        }
        .type {
          margin-bottom: 28px;
        }
        .buy-btn {
          position: absolute;
          right: 10px;
          bottom: 28px;
          display: block;
          padding: 0 .8em;
          background: #a00912;
          color: #fff;
          font-size: 14px;
          line-height: 1.8;
          border-radius: 3px;
        }
      }
    }
    .el-pagination {
      text-align: center;
      margin: 20px 0 40px;
      button:hover {
        color: #a00912;
      }
      .el-pager li:hover {
        color: #a00912;
      }
      .number {
        padding: 0 15px;
        font-size: 14px;
      }
      .number.active {
        border-color: #fff;
        background-color: #fff;
        color: #a00912;
      }
    }
  }
</style>
